<!DOCTYPE html>
<html>
    <head>
        <title>Renju</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">                
        <link rel="stylesheet" type="text/css" href="style/common.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="style/flexigrid.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="style/jquery-ui-1.8.21.custom.css" media="screen" />
        <script type="text/javascript" src="js_files/jQuery.js"></script>
        <script type="text/javascript" src="js_files/flexigrid.js"></script>
        <script type="text/javascript" src="js_files/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js_files/index.js"></script>              
    </head>
    <body>
        <div class="content">
            <#include "include/header.html">
            <div class="main_content">                        
                <label style="float: left;" class="validation">${createGameError}</label>      
                <div style="float: left;">
                    <table class="gameList">
                        <thead>
                            <tr>

                            </tr>
                        </thead>
                        <tbody id="gameData">                        
                        </tbody>
                    </table>
                </div>
                <div style="float: right;">
                    <table class="top10PlayerList">
                        <thead>
                            <tr>

                            </tr>
                        </thead>
                        <tbody>                        
                        </tbody>
                    </table>
                </div>
            </div>


            <div id="create_game_dialog_form">    
                <label class="validation" id="timeError"></label>
                <form  onsubmit="return validateForm();" name="gameCreation">
                    <table>
                        <tr>
                            <td>Time (in minutes)</td>
                            <td>
                                <input type="text" name="time" id="time" class="text ui-widget-content ui-corner-all"/>
                            </td>         
                            <td>
                                <label class="validation" id="timeError"></label>
                            </td>
                        </tr>
                        <tr>
                            <td>Start rule</td>
                            <td>
                                <input type="checkbox" name="startRule" id="startRule" class="text ui-widget-content ui-corner-all"/> 
                            </td>          
                            <td></td>
                        </tr>
                    </table>                    
                </form>
            </div>      

        </div>
    </body>
</html>